import React, { useState, useEffect } from "react";
import { add, modify } from "@/api/project";
import { Col, Row, Form, Input, Modal } from "antd";
import { DialogType } from "./type";

export default function Dialog({
  messageTip,
  getList,
  setOpen,
  open,
  data,
}: DialogType) {
  const [form] = Form.useForm();
  const [confirmLoading, setConfirmLoading] = useState(false);

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };

  // 确定
  const handleOk = async () => {
    setConfirmLoading(true);
    try {
      const body = await form.validateFields();
      const tip = (res: any, text: string) => {
        if (!res.state) return messageTip("error", res.message);
        messageTip("success", text);
      };
      if (data) {
        const res = await modify({ ...body, id: data.id });
        tip(res, "修改成功");
      } else {
        const res = await add(body);
        tip(res, "添加成功");
      }
      setOpen(false);
      getList();
    } finally {
      setConfirmLoading(false);
    }
  };

  // 取消
  const handleCancel = () => {
    setOpen(false);
  };

  // 关闭后
  const handleCloseModal = (value: boolean) => {
    if (value === false) {
      form.resetFields();
    }
  };

  useEffect(() => {
    if (open) {
      form.setFieldsValue(data);
    }
  }, [open]);

  return (
    <Modal
      width="60%"
      title="新增"
      okText="确定"
      cancelText="取消"
      maskClosable={false}
      keyboard={false}
      open={open}
      confirmLoading={confirmLoading}
      onOk={handleOk}
      onCancel={handleCancel}
      afterOpenChange={handleCloseModal}
    >
      <Form {...layout} form={form} labelAlign="right">
        <Row gutter={10}>
          <Col span={12}>
            <Form.Item
              name="project_name"
              label="项目名"
              rules={[{ required: true, message: "不能为空" }]}
            >
              <Input allowClear placeholder="project_name" />
            </Form.Item>
            <Form.Item
              name="deploy_path"
              label="部署路径"
              rules={[{ required: true, message: "不能为空" }]}
            >
              <Input allowClear placeholder="项目部署的磁盘位置" />
            </Form.Item>
            <Form.Item name="deploy_folder_name" label="部署文件夹名">
              <Input allowClear placeholder="不填时，默认为项目名" />
            </Form.Item>
            <Form.Item
              name="repository_address"
              label="仓库地址"
              rules={[{ required: true, message: "不能为空" }]}
            >
              <Input allowClear placeholder="git clone 地址" />
            </Form.Item>
            <Form.Item name="git_branch_name" label="仓库分支">
              <Input allowClear placeholder="默认为 master" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="project_description" label="项目描述">
              <Input allowClear placeholder="默认为 this is project" />
            </Form.Item>
            <Form.Item name="install_path" label="安装路径">
              <Input
                allowClear
                placeholder="默认为[部署服务根目录/project/项目名]"
              />
            </Form.Item>
            <Form.Item name="build_folder_name" label="构建文件夹名">
              <Input allowClear placeholder="默认为 dist" />
            </Form.Item>
            <Form.Item name="install_command" label="安装命令">
              <Input allowClear placeholder="默认为 npm install" />
            </Form.Item>
            <Form.Item name="build_command" label="部署命令">
              <Input allowClear placeholder="默认为 npm run build" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}
